<script setup lang="ts" name="Publicity">
import {onActivated, onMounted, reactive, ref, toRefs} from "vue";
import HeaderNav from "@/components/HeaderNav.vue";
import sortApi from "@/api/sort.ts";
import publicityApi from "@/api/publicity.ts";
import Detail from "@/views/serve/publicity/detail.vue";
import {useRouter} from 'vue-router'
import {showConfirmDialog, showNotify} from "vant";

const router = useRouter();
const scrollWrapperRef = ref();
const detailRef = ref()
// 数据列表
const data = ref(<any>[]);
const state = reactive({
  active: 0,
  show: false,
  isLoading: false,
  fullscreenLoading: false,
  classifyList: [{
    id: 0,
    name: ''
  }], // 分类列表
  classifyId: 0, // 当前分类
  sea: '',  // 搜索关键字
  pageIndex: 1
})
onMounted(() => {
  state.fullscreenLoading = true;
  getClassifyList();
  getPublicitylist();
})
onActivated(() => {
  onRefresh();
})
// 获取分类列表
const getClassifyList = () => {
  sortApi.getTreeList().then((res: any) => {
    state.classifyList = res.data;
    state.classifyList.unshift(<never>{
      id: 0,
      name: '全部',
      children: []
    })
  })
};
// 获取列表
const getPublicitylist = () => {
  publicityApi.getList({
    title: state.sea,
    sortId: state.classifyId,
    pageIndex: state.pageIndex,
    pageSize: 15
  }).then((res: any) => {
    // 如果是下拉刷新
    if (state.isLoading) {
      data.value = res.data;
    } else {
      data.value.push(...res.data);
    }

    state.fullscreenLoading = false;
    state.isLoading = false;
  })
}

// 点击分类
const choiceClassify = (classifyId: number) => {
  state.classifyId = classifyId;
  data.value = []
  state.pageIndex = 1;
  state.fullscreenLoading = true;
  getPublicitylist();
};
// 点击列表项，跳转详情页
const choiceItem = (formId: number) => {
  state.show = true;
  detailRef.value.init(formId)
}
// 点击搜索按钮
const searchHandle = () => {
  data.value = []
  state.pageIndex = 1;
  state.fullscreenLoading = true;
  getPublicitylist();
}
// 点击添加按钮
const addHandle = () => {
  router.push({path: `/serve/publicity/add`})
}
// 下拉刷新
const onRefresh = () => {
  state.isLoading = true;
  state.pageIndex = 1;
  getPublicitylist();
};
// 滚动加载
const scrollHandle = () => {
  const {
    scrollTop,
    clientHeight,
    scrollHeight
  } = scrollWrapperRef.value
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    state.pageIndex++;
    getPublicitylist();
  }
};
// 删除
const delHandle = (id: number) => {
  const item = data.value.find((item: any) => item.id === id);
  showConfirmDialog({
    title: '警告',
    message: `确定删除"<text style="color: #fa3534">${item.title}</text>"吗？删除后不可恢复？`,
    allowHtml: true,
    confirmButtonText: '删除',
    confirmButtonColor: '#fa3534',
  })
      .then(() => {
        // on confirm
        state.fullscreenLoading = true;
        publicityApi.del(id).then(() => {
          state.fullscreenLoading = false;
          showNotify({
            type: 'success',
            message: '删除成功'
          });
          data.value = data.value.filter((item: any) => item.id !== id);
        })
      })
      .catch(() => {
        // on cancel
        //state.fullscreenLoading = false;
      });
}

const {
  active,
  show,
  classifyList,
  isLoading,
  fullscreenLoading,
  sea
} = toRefs(state);
</script>

<template>
  <div class="publicity_warp app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="true" titelText="大陆传音"></header-nav>
    </div>

    <!-- 中间 -->
    <div class="warp_body">
      <div class="warp_search">
        <van-search v-model="sea" show-action placeholder="请输入搜索关键词" autocomplete="off">
          <template #action>
            <div class="search_btn">
              <div @click="searchHandle">搜索</div>
              <van-icon class="search_add" @click="addHandle" name="add-o" size="22"/>
            </div>

          </template>
        </van-search>
      </div>
      <div class="info-box">
        <div class="warp_left">
          <van-sidebar v-model="active">
            <van-sidebar-item v-for="(item, key) in classifyList" :key="key" :title="item.name"
                              @click="choiceClassify(item.id)"/>
          </van-sidebar>
        </div>
        <div class="warp_right" ref="scrollWrapperRef" @scroll="scrollHandle">
          <lodding-card :isLodding="fullscreenLoading">
            <van-pull-refresh style="min-height: 100%;"
                              v-model="isLoading"
                              success-text="刷新成功"
                              @refresh="onRefresh"
            >
              <van-empty v-if="data.length == 0" description="暂无数据" />

              <van-cell-group v-else>
                <van-swipe-cell v-for="(item, key) in data" :key="key">
                  <van-cell :title="item.title" :value="item.sortName" :label="item.accountNumber"
                            @click="choiceItem(item.id)"/>
                  <template #right>
                    <div style="padding-left: 1px">
                      <van-button square type="danger" text="删除" @click="delHandle(item.id)"/>
                      <!--                                          <van-button square type="primary" text="收藏"/>-->
                    </div>
                  </template>
                </van-swipe-cell>
              </van-cell-group>


            </van-pull-refresh>
          </lodding-card>
        </div>
      </div>
    </div>
  </div>

  <van-popup :lazy-render='false'
             v-model:show="show"
             round
             position="bottom"
             :style="{ height: '70%' }"
  >
    <detail ref="detailRef" @closePopup="show = false"></detail>
  </van-popup>
</template>

<style scoped lang="less">
.app_content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;

  .warp_body {
    overflow: hidden;
  }

  .search_btn {
    display: flex;
    align-items: center;

    .search_add {
      margin-left: 5px;
    }
  }

  .info-box {
    margin: 10px;
    display: flex;
    height: calc(100% - 75px);

    .warp_left {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }

    .warp_right {
      flex: 1;
      height: 100%;
      overflow-y: scroll;
      background: var(--van-cell-background);

    }
  }
}

:deep(.van-sidebar-item) {
  padding: 10px;
}
</style>
